<template>
	<van-cell-group inset class="shop-item">
		<van-cell :is-link="!showMask" @click="handleTitleClick(shop)">
			<span v-if="!showMask">进店</span>
			<div v-else v-show="showMask" class="mask-checkbox" :class="shop.checked? 'selected':''">
				<van-icon name="circle" v-if="!shop.checked"/>
				<van-icon name="checked" v-else/>
			</div>
			<template #title>
				<div class="shop-main">
					<img alt="" :src="shop.logoPath" class="shop-logo"/>
					<div class="van-ellipsis">
						<b class="font-14">{{shop.shopShortName}}</b>
					</div>
					<div class="tag-wrap">
						<div class="sign-tag unicom"><span>合作方全国店</span></div>
						<div class="medal" v-if="shop.cloubSupplier==='1'">小店代发</div>
					</div>
				</div>
			</template>
		</van-cell>
		<div class="van-cell" v-if="shop.offers && shop.offers.length>0">
			<ul class="goods-wrap">
				<router-link v-for="gds in shop.offers" key="gds.gdsId" :to="'/goods/detail?gdsId='+gds.gdsId">
					<van-image width="100%" height="100%" :src="gds.gdsImg" lazy-load/>
					<div class="price" v-if="gds.agentPrice&&gds.agentPrice>0">￥{{fen2Yuan(gds.agentPrice)}}</div>
					<div class="price" v-else><span class="font-12">指导价</span> ￥{{fen2Yuan(gds.agentPrice)}}</div>
				</router-link>
			</ul>
			<div class="mask-layer" v-show="showMask"/>
		</div>
	</van-cell-group>
</template>
<style lang="scss" scoped>
.shop-item{
	margin-top:10px; margin-bottom:10px;
	:deep(.van-cell){
		padding:10px 12px; position:relative;
		.mask-layer{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--white-color);opacity:.3}
	}
	:deep(.van-cell__title){
		flex:5;
		.van-ellipsis{line-height:18px;height:18px;width:calc(100vw - 146px);}
	}
	:deep(.van-cell__value){flex-shrink: 0;}
	.shop-main{
		position:relative;padding-left:44px;
		.shop-logo{display:block;width:44px;height:44px;top:-4px;left:-5px;position:absolute;border-radius:50%;}
	}
	.tag-wrap{
		margin-top:4px;display:flex;align-items: center;font-size:12px;height:14px;line-height:14px;
		cursor: default;color:var(--font-disable-color);
		&>div:not(:last-child){
			margin-right:4px; padding-right:4px; border-right:0.5px solid var(--font-disable-color);
		}
		.medal{color:var(--van-primary-color)}
	}
	.sign-tag{
		height:18px;border-radius:4px;color:var(--white-color);
		display:inline-flex; align-items: center;
		padding:0 6px 0 4px;
		margin-right:-8px!important; transform-origin:0 center;
		background-color: var(--van-primary-color);
		transform:scale(.8,.8);
		&>.iconfont{font-size:14px;margin-right:4px;}
		&.unicom{
			background-color: var(--van-unicom-color);
		}
		&.other{
			background-color: var(--van-success-color);
		}
	}
	.mask-checkbox{
		font-size:20px;
		&.selected{
			color:var(--van-primary-color);
		}
	}
	//.main-cat-text{
	//	color:var(--font-third-color); font-size:12px;
	//	:deep(.van-cell__title){
	//		overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	//		height:14px;line-height:16px;
	//	}
	//}
	.goods-wrap{
		overflow-x:auto;overflow-y:hidden;display:flex;margin:-5px 0 0;padding:0;
		a{
			display:block;position:relative;padding:0;margin:0 8px 0 0; flex-shrink: 0;
			width:25vw; aspect-ratio: 1;border-radius: 8px; overflow:hidden;
			&:last-child{margin-right:0}
			.price{
				position:absolute;bottom:0;left:0;width:100%;height:24px; padding:0 10px;
				line-height:24px;color:var(--white-color); background: rgba(0,0,0,.5);
			}
		}
	}
}
</style>
<script lang="ts" setup>
import {FavoritesGoodsItem, SearchShopItem} from "@/types";
import {fen2Yuan} from "@/utils/validate";
//props
const props = defineProps<{
	shop:SearchShopItem,
	showMask:Boolean|false, //是否显示批量管理遮罩层，一般仅用于关注店铺里的店铺管理
}>()

//emits
const emit = defineEmits<{
	(e: 'check-change', val: boolean): void
}>()

const {to}=useGoto()
const toggle=(item:FavoritesGoodsItem)=>{
	item.checked=!item.checked
	emit('check-change',item.checked)
}
const handleTitleClick=(shop:FavoritesGoodsItem)=>{
	if(props.showMask){
		toggle(shop)
	}else{
		to('/shop/home?shopId='+shop.shopId)
	}
}
</script>